<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 镜像列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-delete" class="handle-del mr10">批量删除</el-button>
                <el-button type="primary" class="handle-del mr10" @click="pullImageDialog()">拉取镜像</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="ID" width="200" align="center">
                    <template v-slot="scope">
                        <span>{{rowId(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="REPOSITORY">
                    <template v-slot="scope">
                        <span>{{repositoryOne(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="TAG">
                    <template v-slot="scope">
                        <span>{{rowTag(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button @click="deleteImage(scope.row)" type="primary">删除</el-button>
                        <el-button @click="createContainer(scope.row)" type="primary">创建容器</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="收货地址" v-model="dialogFormVisible">
            <el-form :model="pullImageForm">
                <el-form-item label="镜像名称">
                    <el-input v-model="pullImageForm.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="pullImage()" :loading="pullImageLoading">确 定</el-button>
    </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "docker_images",
        data(){
            return{
                tableData: [],
                dialogFormVisible:false,
                pullImageForm: {
                    name: '',
                },
                pullImageLoading:false,
            }
        },
        created() {
            this.getImages()
        },
        methods: {
            getImages(){
                axios.defaults.baseURL = '//127.0.0.1:8081';
                axios.get('/docker/ListImages')
                    .then((response)=>{
                        if(response.data.code == 0){
                            this.tableData = response.data.data
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            repositoryOne(row){
                let arr = row["RepoTags"][0].split(":")
                return arr[0]
            },
            rowTag(row){
                let arr = row["RepoTags"][0].split(":")
                return arr[1]
            },
            rowId(row){
                let arr = row["Id"].split(":")
                return arr[1].slice(0,12)
            },
            deleteImage(row){
                let arr = row["Id"].split(":")
                axios.get('/docker/ImageRemove',{
                    params: {
                        imageId: arr[1].slice(0,12)
                    }
                }).then((response)=>{
                    if(response.data.code == 0){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getImages()
                    }else {
                        this.$message.error(response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            pullImageDialog(){
                this.dialogFormVisible = true
            },
            pullImage(){
                if(this.pullImageForm.name == ""){
                    this.$message.error("镜像名称不能为空");
                    return
                }
                this.pullImageLoading = true
                axios.get('/docker/ImagePull',{
                    params: {
                        name: this.pullImageForm.name
                    }
                }).then((response)=>{
                    if(response.data.code == 0){
                        this.$message({
                            message: '镜像拉取成功',
                            type: 'success'
                        });
                        this.getImages()
                    }else {
                        this.$message.error(response.data.message);
                    }
                    this.dialogFormVisible = false
                    this.pullImageLoading = false
                }).catch(function (error) {
                        console.log(error);
                    this.dialogFormVisible = false
                    this.pullImageLoading = false
                });
            },
            createContainer(row){
                console.log(row)
            }
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
</style>